<template>
  <div>
    <h1>我的Apptest</h1>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button size="small" type="danger" :icon="Delete" />
    <div class="demo-pagination-block">
      <div class="demonstration">Total item count</div>
      <el-pagination
        :page-size="100"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="demo-pagination-block">
      <div class="demonstration">Change page size</div>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <svg-icon
        name="home"
        color="pink"
        width="100px"
        height="100px"
      ></svg-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, Search, Delete } from '@element-plus/icons-vue'
</script>
<style scoped></style>
